<template>
    <div class="lineChart" ref="echartRef" style="width: 570px; height: 300px;"></div>
</template>
<script setup lang="ts"  >
import * as echarts from 'echarts'
import { ref,reactive,onMounted } from 'vue';
const listDate = [
                {
                    name: '最高温',
                    type: 'line',
                    smooth: 0.6,
                    data: [499, 499, 499, 499, 499, 499, 499, 499, 499, 499, 499, 499],
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgb(0, 178, 244,0.8)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(0, 178, 244,0 )'
                            },

                        ])
                    },

                },
]
const timeDate = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12 (h)']
const colorDate=   ['#32A6FF']
const date = reactive(listDate)
const time=reactive(timeDate) 
const color=reactive(colorDate)  
const echartRef = ref(null)
onMounted(() => { 
    const myChart =  echarts.init(echartRef.value)
     const option = {   
                color: color,
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },

                xAxis: {
                    nameLocation: 'end',
                    type: 'category',
                    boundaryGap: false,
                    data: time,
                    axisTick: {
                        show: false,

                    },
                    axisLine: {                                    //坐标轴轴线设置
                        show: true,                                  //是否显示坐标轴轴线
                        symbol: ['none', 'none'],                  //坐标轴箭头        (可选'none'   'arrow'   ['none','arrow'])                          
                        lineStyle: {                                //坐标轴的线
                            color: '#204C63',                            //线的颜色
                            width: 2,                                //线的粗细程度    (用数字表示)
                            type: 'solid',                            //线的类型        (可选solid  dotted  dashed)
                            opacity: 0.87                               //线的透明度        (用0~1的小数表示)
                        }
                    },
                    axisLabel: {                                //坐标轴刻度文字的设置
                        show: true,
                        interval: 0,                             //是否显示
                        inside: false,                             //坐标轴刻度文字指向        (true表示向上   false表示向下)
                        rotate: 0,                                 //坐标轴刻度文字的旋转角度
                        margin: 10,                                 //坐标轴刻度文字与轴线之间的距离
                        color: '#32A6FF',                              //坐标轴刻度文字的颜色
                        fontSize: 18,                                //坐标轴刻度文字的样式          (可选normal  italic   oblique)
                        fontFamily: 'MicrosoftYaHei',                        //坐标轴刻度文字的风格        (可选楷体  宋体  华文行楷等等)
                        padding: [5, 0, 2, 0]                    //坐标轴刻度文字的边距        (上右下左)          
                    },

                },
                yAxis: {
                    show: true,
                    type: 'value',
                    minInterval: 200, // 设置最小的刻度是1
                    axisTick: {
                        show: false // 不显示刻度线
                    },
                    nameTextStyle: { // 坐标轴名称的文字样式
                        color: '#fff', // 坐标轴名称的颜色
                        fontSize: 19, // 坐标轴名称的大小         (用数字表示)
                        fontWeight: 'bold', // 坐标轴文字加粗程度        (可选bold   bolder  lighter  normal)
                        fontstyle: 'normal', // 坐标轴文字样式      (可选normal  italic   oblique)
                        fontFamily: 'Adobe Heiti Std R', // 坐标轴文字风格        (可选楷体  宋体  华文行楷等等)
                        padding: [15, 0, 2, -5] // 坐标轴文字边距        (上右下左)
                    },
                    axisLine: { // 坐标轴轴线设置
                        show: true, // 是否显示坐标轴轴线
                        symbol: ['none', 'none'], // 坐标轴箭头        (可选'none'   'arrow'   ['none','arrow'])
                        symbolSize: [8, 8], // 箭头大小        ([宽度,高度])
                        symbolOffset: [0, 7], // 箭头偏移
                        lineStyle: { // 坐标轴的线
                            color: '#204C63', // 线的颜色
                            width: 2, // 线的粗细程度    (用数字表示)
                            type: 'solid', // 线的类型        (可选solid  dotted  dashed)
                            opacity: 0.87 // 线的透明度        (用0~1的小数表示)
                        }
                    },
                    axisLabel: {                                //坐标轴刻度文字的设置
                        show: true,                                 //是否显示
                        inside: false,                             //坐标轴刻度文字指向        (true表示向上   false表示向下)
                        rotate: 0,                                 //坐标轴刻度文字的旋转角度
                        margin: 10,                                 //坐标轴刻度文字与轴线之间的距离
                        color: '#fff',                              //坐标轴刻度文字的颜色
                        fontSize: 19,                                //坐标轴刻度文字的大小         (用数字表示)
                        // fontWeight: 'lighter',                        //坐标轴刻度文字的加粗程度    (可选bold   bolder  lighter  normal)
                        fontstyle: 'normal',                        //坐标轴刻度文字的样式          (可选normal  italic   oblique)
                        fontFamily: 'MicrosoftYaHei',                  //坐标轴刻度文字的边距        (上右下左)          
                    },
                    splitLine: {                                //网格线
                        show: true,                                  //是否显示
                        lineStyle: {                                //网格线样式
                            color: '#0E4E64',                        //网格线颜色
                            width: 1,                                //网格线的加粗程度
                            type: 'solid',                         //网格线类型
                            opacity: 0.87
                        }
                    },
                },
                series:date
            } 
       myChart.setOption(option)
}) 
</script>
  
<!-- 
<script>
import * as echarts from 'echarts'
export default {
    name: 'LineChart',
    data() {
        return {
            date: [
                {
                    name: '最高温',
                    type: 'line',
                    smooth: 0.6,
                    data: [160, 300, 500, 800, 900, 1100, 1300, 1400, 1500, 1600, 1700, 1800],
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgb(0, 178, 244,0.8)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(0, 178, 244,0 )'
                            },

                        ])
                    },

                },

            ],
            time: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12 (h)'],
            color: ['#32A6FF']
        }
    },
    mounted() {
        this.initLineChart()
    },
    methods: {
        initLineChart() {
            const chartDom = this.$refs.lineChart
            const myChart = echarts.init(chartDom)
            const option = {

                // tooltip: {
                //     trigger: 'axis',
                //     className: "chart_box",
                //     formatter: (params, ticket, callback) => {
                //         const { axisValue } = params[0]
                //         let content = `
                //         <div class="chart_box">                         
                //   `
                //         for (var i = 0; i < params.length; i++) {
                //             const { seriesName, value, marker } = params[i]
                //             content += ` 
                //       <div  padding:5px 0;> ${value} ℃</div></div>
                //     `
                //         }
                //         return content
                //     },
                //     backgroundColor: 'rgba(8, 29, 48,0.57)', // 背景颜色
                //     borderColor: '#1AF2FF', // 边框颜色
                //     borderWidth: 1, // 边框宽度
                //     padding: 10, // 内边距
                //     textStyle: {
                //         color: '#DBF3FF', // 文本颜色
                //         fontSize: 20, // 文本大小
                //         lineHeight: 56,
                //         height: 56,
                //         rich: {
                //             a: {
                //                 lineHeight: 80,
                //             }
                //         }
                //     }
                // },

                color: this.color,
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },

                xAxis: {
                    nameLocation: 'end',
                    type: 'category',
                    boundaryGap: false,
                    data: this.time,
                    axisTick: {
                        show: false,

                    },
                    axisLine: {                                    //坐标轴轴线设置
                        show: true,                                  //是否显示坐标轴轴线
                        symbol: ['none', 'none'],                  //坐标轴箭头        (可选'none'   'arrow'   ['none','arrow'])                          
                        lineStyle: {                                //坐标轴的线
                            color: '#204C63',                            //线的颜色
                            width: 2,                                //线的粗细程度    (用数字表示)
                            type: 'solid',                            //线的类型        (可选solid  dotted  dashed)
                            opacity: 0.87                               //线的透明度        (用0~1的小数表示)
                        }
                    },
                    axisLabel: {                                //坐标轴刻度文字的设置
                        show: true,
                        interval: 0,                             //是否显示
                        inside: false,                             //坐标轴刻度文字指向        (true表示向上   false表示向下)
                        rotate: 0,                                 //坐标轴刻度文字的旋转角度
                        margin: 10,                                 //坐标轴刻度文字与轴线之间的距离
                        color: '#32A6FF',                              //坐标轴刻度文字的颜色
                        fontSize: 18,                                //坐标轴刻度文字的样式          (可选normal  italic   oblique)
                        fontFamily: 'MicrosoftYaHei',                        //坐标轴刻度文字的风格        (可选楷体  宋体  华文行楷等等)
                        padding: [5, 0, 2, 0]                    //坐标轴刻度文字的边距        (上右下左)          
                    },

                },
                yAxis: {
                    show: true,
                    type: 'value',
                    minInterval: 200, // 设置最小的刻度是1
                    axisTick: {
                        show: false // 不显示刻度线
                    },
                    nameTextStyle: { // 坐标轴名称的文字样式
                        color: '#fff', // 坐标轴名称的颜色
                        fontSize: 19, // 坐标轴名称的大小         (用数字表示)
                        fontWeight: 'bold', // 坐标轴文字加粗程度        (可选bold   bolder  lighter  normal)
                        fontstyle: 'normal', // 坐标轴文字样式      (可选normal  italic   oblique)
                        fontFamily: 'Adobe Heiti Std R', // 坐标轴文字风格        (可选楷体  宋体  华文行楷等等)
                        padding: [15, 0, 2, -5] // 坐标轴文字边距        (上右下左)
                    },
                    axisLine: { // 坐标轴轴线设置
                        show: true, // 是否显示坐标轴轴线
                        symbol: ['none', 'none'], // 坐标轴箭头        (可选'none'   'arrow'   ['none','arrow'])
                        symbolSize: [8, 8], // 箭头大小        ([宽度,高度])
                        symbolOffset: [0, 7], // 箭头偏移
                        lineStyle: { // 坐标轴的线
                            color: '#204C63', // 线的颜色
                            width: 2, // 线的粗细程度    (用数字表示)
                            type: 'solid', // 线的类型        (可选solid  dotted  dashed)
                            opacity: 0.87 // 线的透明度        (用0~1的小数表示)
                        }
                    },
                    axisLabel: {                                //坐标轴刻度文字的设置
                        show: true,                                 //是否显示
                        inside: false,                             //坐标轴刻度文字指向        (true表示向上   false表示向下)
                        rotate: 0,                                 //坐标轴刻度文字的旋转角度
                        margin: 10,                                 //坐标轴刻度文字与轴线之间的距离
                        color: '#fff',                              //坐标轴刻度文字的颜色
                        fontSize: 19,                                //坐标轴刻度文字的大小         (用数字表示)
                        // fontWeight: 'lighter',                        //坐标轴刻度文字的加粗程度    (可选bold   bolder  lighter  normal)
                        fontstyle: 'normal',                        //坐标轴刻度文字的样式          (可选normal  italic   oblique)
                        fontFamily: 'MicrosoftYaHei',                  //坐标轴刻度文字的边距        (上右下左)          
                    },
                    splitLine: {                                //网格线
                        show: true,                                  //是否显示
                        lineStyle: {                                //网格线样式
                            color: '#0E4E64',                        //网格线颜色
                            width: 1,                                //网格线的加粗程度
                            type: 'solid',                         //网格线类型
                            opacity: 0.87
                        }
                    },
                },
                series: this.date
            }

            myChart.setOption(option)
        }
    }
}
</script> -->
<style lang="scss" scoped>
.lineChart {
    margin-top: -15px;
    margin-left: 21px;
}
</style>
